<template>
  <div v-loading="loading" v-empty="nopermission" class="rc-cont"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限">
    <flexbox class="rc-head" direction="row-reverse">
      <el-button v-if="!isSeas && visitSave"
          class="xr-btn--orange rc-head-item"
          icon="el-icon-plus"
          type="primary"
          @click="createClick">新建回访
      </el-button>
    </flexbox>
    <el-table v-show="fieldList.length > 0"
        :data="list" :height="tableHeight"
        :cell-class-name="cellClassName"
        stripe style="width: 100%;border: 1px solid #E6E6E6;"
        @row-click="handleRowClick">
      <template v-for="(item, index) in fieldList" :key="index">
        <el-table-column
            :prop="item.prop"
            :label="item.label"
            :min-width="item.width"
            show-overflow-tooltip/>
      </template>

    </el-table>
    <CRMFullScreenDetail v-model:visible="showFullDetail" :id="detailId"
        crm-type="visit" @handle="detailHandle"/>
    <CRMAllCreate v-if="isCreate"
        :action="createActionInfo"
        crm-type="visit"
        @save-success="createSaveSuccess"
        @close="isCreate=false"/>
  </div>
</template>


<script setup>

import {filedGetTableFieldAPI} from "@/api/crm/common.js";
import {crmCustomerQueryVisitAPI} from "@/api/crm/customer.js";
import {crmContractQueryVisitAPI} from "@/api/crm/contract.js";
import CRMFullScreenDetail from "/src/components/CRMFullScreenDetail.vue"

import CRMAllCreate from '../SzCrud/CRMAllCreate.vue'
import {getPermissionByKey} from '/src/utils/index.js'


defineOptions({
  name: 'RelativeVisit', // 相关回访
})

const props = defineProps({
  // 模块ID
  id: [String, Number],
  // 客户类型
  crmType: {
    type: String,
    default: ''
  },
  // 回访人下 新建商机 需要回访里的客户信息  合同下需要客户和商机信息
  detail: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 是公海 默认是客户 */
  isSeas: {
    type: Boolean,
    default: false
  }
})

const loading = ref(false)
const nopermission = ref(false)
const list = ref([])
const fieldList = ref([])
const tableHeight = ref('400px')
const showFullDetail = ref(false)
// 控制新建
const isCreate = ref(false)
// 查看全屏回访详情的 ID
const detailId = ref('')
// 创建的相关信息
const createActionInfo = ref({type: 'relative', crmType: props.crmType, data: {}})
// 关联的逻辑
const showRelativeView = ref(false)
const selectionList = ref([])


const rootTabs  = inject("rootTabs")


const visitSave = computed(() =>{
  return !!getPermissionByKey('crm.visit.save')
})


watch(() => props.id, function (val) {
  list.value = []
  getDetail()
})

watch(() => rootTabs.currentName, (val) => {
  if (val === 'RelativeVisit') {
    getDetail(false)
  }
})

onMounted(() => {
  getDetail()
})


/**
 * 表头数据
 */
function getFieldList() {
  // this.fieldList.push({
  //   prop: 'visitNumber',
  //   width: '200',
  //   label: '回访编号'
  // })
  // this.fieldList.push({ prop: 'visitTime', width: '200', label: '回访时间' })
  // this.fieldList.push({ prop: 'ownerUserName', width: '200', label: '回访人' })
  // this.fieldList.push({ prop: 'returnVisitType', width: '200', label: '回访形式' })
  // this.fieldList.push({ prop: '客户满意度', width: '200', label: '客户满意度' })
  // this.fieldList.push({ prop: 'contractNum', width: '200', label: '合同编号' })
  filedGetTableFieldAPI({
    label: 17
  }).then(res => {
    const list = res.data.data || []
    const fieldList = []
    for (let index = 0; index < list.length; index++) {
      const element = list[index]
      if (element.fieldId) {
        fieldList.push({prop: element.fieldName, width: '150', label: element.name})
      }
    }
    fieldList.value = fieldList
  }).catch(() => {
  })
}

/**
 * 获取数据
 */
function getDetail(load = true) {
  if (fieldList.value.length == 0) {
    getFieldList()
  }
  loading.value = load
  const request = {
    customer: crmCustomerQueryVisitAPI,
    contract: crmContractQueryVisitAPI
  }[props.crmType]
  const params = {pageType: 0}
  params[props.crmType + 'Id'] = props.id
  request(params)
      .then(res => {
        nopermission.value = false
        loading.value = false
        list.value = res.data.data.list
      })
      .catch(data => {
        if (data.code == 102) {
          nopermission.value = true
        }
        loading.value = false
      })
}

/**
 * 当某一行被点击时会触发该事件
 */
function handleRowClick(row, column, event) {
  if (column.property == 'visitNumber') {
    detailId.value = row.visitId
    showFullDetail.value = true
  }
}

/**
 * 通过回调控制class
 */
function cellClassName({row, column, rowIndex, columnIndex}) {
  if (column.property === 'visitNumber') {
    return 'can-visit--underline'
  } else {
    return ''
  }
}

/**
 * 新建
 */
function createClick() {
  //  客户 下新建回访
  if (props.crmType == 'customer') {
    createActionInfo.value.data['customer'] = props.detail
  } else if (props.crmType == 'contract') {
    createActionInfo.value.data['customer'] = props.detail
    createActionInfo.value.data['contract'] = props.detail
    createActionInfo.value.relativeData = {
      contractId: props.detail.contractId
    }
  }
  isCreate.value = true
}
function createSaveSuccess() {
  if (canRelation.value) {
    cxt.refs.crmrelative.refreshList()
  } else {
    bus.emit('crm-tab-num-update')
    getDetail()
  }
}

/**
 * 详情操作
 */
function detailHandle(data) {
  if (data.type === 'delete') {
    getDetail()
    nextTick(() => {
      bus.emit('crm-tab-num-update')
    })
  }
}

</script>

<script type="text/javascript">


export default {
  components: {
    // CRMAllCreate
  },
  mixins: [],
  props: {},
  data() {
    return {}
  },
  // inject: ['rootTabs'],
  computed: {},
  watch: {},
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
@import '../../styles/relativecrm';
</style>
